/* 
 * Virtual Bank System - Responsive CSS
 * Media queries for responsive design
 */

/* Large Desktop (≥1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
  
  .sidebar {
    width: 200px;
  }
  
  .content {
    margin-left: 200px;
  }
  
  .content.sidebar-collapsed {
    margin-left: 80px;
  }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }
  
  .col-md-12 { flex: 0 0 100%; }
  .col-md-6 { flex: 0 0 50%; }
  .col-md-4 { flex: 0 0 33.33%; }
  .col-md-3 { flex: 0 0 25%; }
  
  .auth-banner {
    display: none;
  }

  .stat-card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .stat-card-value {
    font-size: 18px;
  }

  .product-card-return {
    font-size: 18px;
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .container {
    max-width: 540px;
  }
  
  .header {
    padding: 0 var(--spacing-md);
  }
  
  .mobile-menu-btn {
    display: block;
    margin-right: var(--spacing-md);
    color: white;
    font-size: 20px;
    cursor: pointer;
  }
  
  .sidebar {
    width: 0;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  
  .sidebar.mobile-visible {
    width: 250px;
    transform: translateX(0);
  }
  
  .content {
    margin-left: 0;
    padding: var(--spacing-md);
    padding-top: calc(64px + var(--spacing-md));
  }
  
  .content.sidebar-collapsed {
    margin-left: 0;
  }
  
  .col-sm-12 { flex: 0 0 100%; }
  .col-sm-6 { flex: 0 0 50%; }

  .row {
    margin: 0 -5px;
  }

  .col {
    padding: 0 5px;
  }

  .auth-card {
    padding: var(--spacing-lg);
  }

  .modal {
    max-width: 90%;
  }
}

/* Small Mobile (<576px) */
@media (max-width: 575px) {
  .col-xs-12 { flex: 0 0 100%; }
  
  .header-nav-item span {
    display: none;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-header-actions {
    margin-top: var(--spacing-sm);
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .product-card-info {
    flex-direction: column;
  }

  .product-card-label {
    margin-bottom: 4px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
    margin: 5px 0;
  }

  .modal-footer .btn + .btn {
    margin-left: 0;
  }

  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row > .form-group {
    margin-right: 0;
  }
}

/* Height-based Media Queries */
@media (max-height: 700px) {
  .sidebar {
    overflow-y: auto;
  }

  .auth-card {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Print Styles */
@media print {
  .header, .sidebar, .footer, .no-print {
    display: none;
  }

  .content {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: white;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* Dark Mode (System Preference) */
@media (prefers-color-scheme: dark) {
  :root.dark-mode-enabled {
    --primary-color: #2d54c8;
    --secondary-color: #64a0d4;
    --accent-color: #ffb84c;
    --success-color: #73d13d;
    --warning-color: #ffcb47;
    --error-color: #ff7875;
    --info-color: #4dabf7;
    
    --title-color: #e0e0e0;
    --text-color: #b0b0b0;
    --light-text: #808080;
    
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --border-color: #333333;
    --divider-color: #2c2c2c;
    
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --modal-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}
